<!DOCTYPE html><HTML><HEAD><meta name="renderer" content="webkit"><meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/><TITLE>健康辅助系统 讨论区</TITLE><META Name="keywords" Content="数据上传," />
    <META Name="description" Content="健康辅助系统,讨论区," />
    <META Name="format-detection" Content="telephone=no" />
    
    
    
    
    
    <META charset="UTF-8">
    <META content="IE=edge" http-equiv="X-UA-Compatible">
    <META name="renderer" content="webkit"><LINK rel="stylesheet" type="text/css" href="css/index.css"><script language="javascript" src="js/jquery-latest.min.js"></script><!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    
    <!--Announced by Visual SiteBuilder 9-->
    <link rel="stylesheet" type="text/css" href="css/_sitegray_d.css" />
    <script language="javascript" src="js/_sitegray.js"></script>
    <!-- CustomerNO:7765626265723230747f465453525742000000054156 -->
    <link rel="stylesheet" type="text/css" href="css/index.vsb.css" />
    <script type="text/javascript" src="js/vsbscreen.min.js" id="_vsbscreen" ></script>
    <script type="text/javascript" src="js/counter.js"></script>
    <script type="text/javascript">_jsq_(1001,'/index.jsp',-1,1391600553)</script>
    </HEAD>
    <BODY > <div style='width:0px;height:0px;overflow: hidden;'><img src=""  /></div>
    
    
    
    
    
    
    <style type="text/css">
    
    body{
                background-image:url(images/background02.jpg) ; 
            background-repeat:no-repeat;
            background-position:top;
            
    }
    .wrapper{
        width:100%; 
        background:url(images/logo.png) top center no-repeat; 
        min-height:800px; 
        background-size:100% 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/background01.jpg',sizingMethod='scale');
    }
    .dft-midcont {
    width: 600px; /* 宽度设置为原来的2倍 */
    margin: auto;
    margin-top: 20px;
    overflow: hidden; /* 防止内容溢出 */
  }
  .blockwhite {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* 隐藏溢出的内容 */
  }
  .title {
    font-size: 24px;
    color: #333;
  }
  .cont {
    margin-top: 20px;
  }
  .comment-list {
    height: 420px; /* 设置评论列表的高度 */
    overflow-y: auto; /* 添加垂直滚动条 */
    padding: 10px; /* 增加内边距 */
  }bb
  .comment {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    max-width: 100%; /* 确保评论宽度不超过容器 */
  }
  .comment .username,
  .comment .time {
    font-weight: bold;
    margin-right: 10px;
  }
  .input-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
  }
  .input-area textarea {
    flex-grow: 1;
    height: 50px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    resize: none; /* 防止用户调整大小 */
  }
  .input-area button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
    </style>
    <DIV class="mainCont"><!--header S-->
    <DIV class="dft-header">
    <DIV class="topbar clearfix">
    <DIV class="user-opr clearfix" style="height: 58px; float: right">
    
    <div style="clear:both;"></div>
    
    <script language="javascript" src="js/tsitesclick.js"></script>
     <div class="item lag"><a href=""></a></div>


<script> var _tsites_com_view_mode_type_=8;</script>
<div class="item"><a href=""  target=_blank title="华中科技大学" ></a></div>
</DIV>
    
    
    
    
    
    <script> var _tsites_com_view_mode_type_=8;</script>
    <div class="logo" style="float: left;">
        <img border="0" src="images/logo.png" title="健康平台logo" />
        <div style="color: white; margin-left: 10px; font-size: 36px; display: inline-block; vertical-align: top;">健康辅助检测平台</div>
    </div>
    </DIV><!--nav-->
    <DIV class="navBar clearfix">
    
    
                <ul class="navbox clearfix"  id="MenuBar1" style="width:1136px;overflow: hidden;height:52px">
     <li   ><h3><a href="function.html" >数据上传</a></h3>
                    </li>
    
     <li   class="fNiv"   ><h3><a href="quiry.html" >数据查询</a></h3></li>
    
     <li   class="fNiv"   ><h3><a href="discussion.html" style=" background: #4d90d2;" >讨论区</a></h3></li>
    </ul>
         <script type="text/javascript">
    jQuery(document).ready(function(){
        var totalwidth = 1136-110;
        var allliwidth = 0;
        var othernavary = new Array();
        var MenuBar3 = jQuery("#MenuBar3");
        var MenuBar1 = jQuery("#MenuBar1");
        var navliobjlist =  jQuery("#MenuBar1 > li");
        
        for(var i=0;i<navliobjlist.length-1;i++)
        {
            var liobj = navliobjlist.get(i);
            if(liobj)
            {
                var jliobj = jQuery(liobj);
                var liwidth = jliobj.width();
                allliwidth+=liwidth+10;
                if(allliwidth>=totalwidth && (i!=navliobjlist.length-1))
                {
                    var templiobj = jliobj[0];      
                    othernavary.push(templiobj);
                    MenuBar1[0].removeChild(jliobj[0]);
                }
            }
        }
        if(allliwidth>totalwidth)
        {
        jQuery("#MenuBar2").css("display","");
        for(var i=0;i<othernavary.length;i++)
        {
            var tempotherli = jQuery(othernavary[i]);   
            var sobli  = jQuery("<li class='item'></li>");
            var soblih2  = jQuery("<h2></h2>");
            var sonh2a = jQuery("<a></a>").attr({"href": tempotherli.find("h3 > a").attr("href")}).append(tempotherli.find("h3 > a").html());
            soblih2.append(sonh2a);
            var soblidiv  = jQuery("<div class='drop2'></div>");
            
            //循环取出所有的二级，然后循环生成p标签和a标签。放入
            var number = tempotherli.find("h2 > a").length;
            for(var j=0;j<number;j++)
            {
                var sonp = jQuery("<p></p>");
                var sona = jQuery("<a></a>").attr({"href": tempotherli.find("h2 > a").eq(j).attr("href")}).append(tempotherli.find("h2 > a").eq(j).html());
                sonp.append(sona);
                soblidiv.append(sonp);
            }
            sobli.append(soblih2);
            if(!number<1)
            {
                sobli.append(soblidiv);
            }
            
                
            MenuBar3.append(sobli);
        }}
    
    jQuery("#MenuBar1").css("overflow","");
    });
    </script> 
    
    
    
    
    
    
    </DIV></DIV><!--header E--><!--个人主页-->
    <DIV class="dft-main clearfix">
    <DIV class="dft-side"><!--教师个人-->
    <DIV class="blockwhite JS-display">
    <DIV class="js-top clearfix">
    
    <div class="photowrap">
                                <div class="img"><span><img id="u_u6_23212pic" border="0" /></span></div>
                            </div><script language="javascript" src="js/imagescale.js"></script>
    <script type="text/javascript"> 
    var path = localStorage.getItem("imagePath")
    var u_u6_pic = new ImageScale("u_u6_",140,140,true,true);u_u6_pic.addimg(path,"","张三","23212");
    </script>
    
    <DIV class="info"><h2>张三</h2><script> var _tsites_com_view_mode_type_=8;</script>
    <script language="javascript" src="js/tsitesencrypt.js"></script><div class="like"><i class="ico" src="images/background02.jpg" id="_parise_imgobj_u8"></i><span id="_parise_obj_u8"></span></div><script language="javascript" src="js/TsitesPraiseUtil.js"></script>
    <script> var _TsitesPraiseUtil_u8= new TsitesPraiseUtil();_TsitesPraiseUtil_u8.setParam({'nodeid':'_parise_obj_u8','iscanclickidobj':'iscanclick_parise_obj_u8','pdtype':'0','imageid':'_parise_imgobj_u8','apptype':'index','basenum':'0','uid':'23212','homepageid':144365,'limttype':'allpage','limithour':24,'contentid':0});</script>
    </DIV></DIV>  
    </DIV>




        <DIV class="blockwhite Psl-info">
            <DIV class="title clearfix">
                <I class="ico ico-1"></I>
                <DIV class="info">
                    <H2>个人信息</H2>
                    <P>Personal information</P>
                </DIV>
            </DIV>
            <DIV class="cont">
                <p id="account1">
                    用户名：<span id="accountValue1"></span>
                </p>
                <p id="account2">
                    uid：<span id="accountValue2"></span>
                </p>
                <p id="identity">
                    身份：用户
                </p>
            </DIV>
        </DIV>

        <script>
            var accountKey1 = 'username';
            var accountKey2 = 'userid';

            // 当文档加载完毕时执行
            document.addEventListener('DOMContentLoaded', function() {
                // 从 localStorage 获取账号信息
                var accountValue1 = localStorage.getItem(accountKey1);
                var accountValue2 = localStorage.getItem(accountKey2);

                // 将获取到的值显示在页面上
                document.getElementById('accountValue1').textContent = accountValue1;
                document.getElementById('accountValue2').textContent = accountValue2;
            });
        </script>
    </DIV><!--side-->





    <!-- <DIV class="dft-content clearfix"> -->
        <div class="dft-midcont">
            <div class="blockwhite Psl-info">
              <div class="title clearfix">
                <i class="ico ico-4"></i>
                <div class="info"><h2>讨论区</h2><p>Discussion Area</p></div>
              </div>
              <div class="cont">
                <!-- 评论列表 -->
                <div class="comment-list" id="commentList">
                  <!-- 评论条目 -->
                </div>
                <!-- 输入区域 -->
                <div class="input-area">
                  <textarea id="commentText" placeholder="输入您的评论..."></textarea>
                  <button id="sendButton">发送信息</button>
                </div>
              </div>
            </div>
          </div>
          
          <script>
          // 假设这是从后端获取的评论数据
          var comments = [
            { username: "用户1", createdtime: "2024-01-01 10:00", text: "这是第一条评论的内容。" },
            { username: "用户2", createdtime: "2024-01-02 11:00", text: "这是第二条评论的内容。" },
            // 更多评论...
          ];

          // 获取所有评论并显示在页面上
          async function fetchComments() {
              try {
                  var uid = localStorage.getItem('userid');
                  var username = localStorage.getItem('username');
                  var userpic = localStorage.getItem('userpic');

                  const responseBody = JSON.stringify({
                      uid,
                      username,
                      userpic
                  });

                  // 访问的后端api
                  var ipAdress = localStorage.getItem('ip');
                  var apiUrl = ipAdress + 'api/comments';

                  const response = await fetch(apiUrl, {
                      method: 'POST',
                      headers: {
                          'Content-Type': 'application/json',
                      },
                      body: JSON.stringify(responseBody),
                  });

                  if (!response.ok) {
                      throw new Error('获取评论失败');
                  }
                  
                  comments = await response.json(); // 更新评论数组
                  initCommentList(); // 初始化评论列表
              } catch (error) {
                  console.error('请求失败:', error);
                  alert('无法获取评论，请稍后重试');
              }
          }
          
          // 初始化评论列表
          function initCommentList() {
            var commentList = document.getElementById('commentList');
            commentList.innerHTML = ''; // 清空现有列表
            comments.forEach(function(comment) {
              var div = document.createElement('div');
              div.className = 'comment';
              div.innerHTML = '<span class="username">' + comment.username + '</span>' +
                             '<span class="time">' + comment.createdtime + '</span>' +
                             '<p>' + comment.text + '</p>';
              commentList.appendChild(div);
            });
          }
          
          // 发送评论
          async function sendComment() {
            var commentText = document.getElementById('commentText').value;
            if (commentText.trim() === '') {
              alert('评论不能为空！');
              return;
            }
            var nowTime = new Date().toLocaleString();

            // 创建一个 FormData 对象，并添加评论数据
            var formData = new FormData();
            formData.append('uid', localStorage.getItem('userid'));
            formData.append('text', commentText);
            formData.append('createdtime', nowTime);
            
            console.log('FormData:', Array.from(formData.entries())); // 打印 FormData 的内容以供调试
            
            // 发送到后端API
            try {
                // 访问的后端api
                var ipAdress = localStorage.getItem('ip');
                var apiUrl = ipAdress + 'api/addcomment';

                const response = await fetch(apiUrl, {
                    method: 'POST',
                    body: formData // 这里直接发送 FormData 对象
                });

                if (!response.ok) {
                    throw new Error('发送评论失败');
                }

                // 成功发送评论
                var newComment = {
                    username: localStorage.getItem('username'),
                    createdtime: nowTime,
                    text: commentText
                };
                comments.push(newComment);
                initCommentList(); // 重新渲染评论列表
                // alert('评论成功！');
            } catch (error) {
                console.error('发送评论失败:', error);
                alert('评论失败，请稍后重试！');
            }

            document.getElementById('commentText').value = ''; // 清空输入框
          }
          
          // 绑定发送按钮事件
          document.getElementById('sendButton').addEventListener('click', sendComment);
          
          // 页面加载完成后初始化评论列表
          window.onload = async function() {
              await fetchComments();
              initCommentList();
          };
          </script>

    </DIV><!--content--></DIV></DIV><!--footer S-->
    </BODY></HTML>
    